import Taro from '@tarojs/taro';
import React, { useState } from 'react';
import { View, Text, Input, Button } from '@tarojs/components';
import { MaterialIcons } from 'taro-icons';
import './index.scss';

const ChangePasswordPage: React.FC = () => {
  const [oldPassword, setOldPassword] = useState<string>('');
  const [newPassword, setNewPassword] = useState<string>('');
  const [confirmPassword, setConfirmPassword] = useState<string>('');
  const [showOldPassword, setShowOldPassword] = useState<boolean>(false);
  const [showNewPassword, setShowNewPassword] = useState<boolean>(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState<boolean>(false);

  // 验证表单
  const validateForm = () => {
    if (!oldPassword.trim()) {
      Taro.showToast({ title: '请输入旧密码', icon: 'none' });
      return false;
    }
    if (!newPassword.trim()) {
      Taro.showToast({ title: '请输入新密码', icon: 'none' });
      return false;
    }
    if (newPassword.length < 6) {
      Taro.showToast({ title: '新密码长度不能少于6位', icon: 'none' });
      return false;
    }
    if (newPassword !== confirmPassword) {
      Taro.showToast({ title: '两次输入的密码不一致', icon: 'none' });
      return false;
    }
    return true;
  };

  // 处理密码修改
  const handleChangePassword = async () => {
    if (!validateForm()) return;

    try {
      Taro.showLoading({ title: '修改中...' });
      
      // 模拟API调用
      // const response = await changePasswordApi({ oldPassword, newPassword });
      // if (response.code === 200) {
      //   Taro.showToast({ title: '密码修改成功', icon: 'success' });
      //   Taro.navigateBack();
      // } else {
      //   Taro.showToast({ title: response.message || '密码修改失败', icon: 'none' });
      // }
      
      // 模拟成功
      setTimeout(() => {
        Taro.hideLoading();
        Taro.showToast({ title: '密码修改成功', icon: 'success' });
        Taro.navigateBack();
      }, 1000);
    } catch (error) {
      Taro.hideLoading();
      console.error('修改密码失败:', error);
      Taro.showToast({ title: '网络错误，请稍后重试', icon: 'none' });
    }
  };

  return (
    <View className="change-password-page">
      <View className="page-header">
        <MaterialIcons name="arrow-back" size={24} color="#000" onClick={() => Taro.navigateBack()} />
        <Text className="header-title">修改密码</Text>
        <View className="header-placeholder"></View>
      </View>
      
      <View className="form-container">
        <View className="input-group">
          <Text className="label">旧密码</Text>
          <View className="input-wrapper">
            <Input
              className="input"
              type={showOldPassword ? 'text' : 'password'}
              placeholder="请输入旧密码"
              value={oldPassword}
              onChange={(e) => setOldPassword(e.detail.value)}
            />
            <MaterialIcons
              name={showOldPassword ? 'visibility' : 'visibility-off'}
              size={20}
              color="#ccc"
              onClick={() => setShowOldPassword(!showOldPassword)}
            />
          </View>
        </View>

        <View className="input-group">
          <Text className="label">新密码</Text>
          <View className="input-wrapper">
            <Input
              className="input"
              type={showNewPassword ? 'text' : 'password'}
              placeholder="请输入新密码（不少于6位）"
              value={newPassword}
              onChange={(e) => setNewPassword(e.detail.value)}
            />
            <MaterialIcons
              name={showNewPassword ? 'visibility' : 'visibility-off'}
              size={20}
              color="#ccc"
              onClick={() => setShowNewPassword(!showNewPassword)}
            />
          </View>
        </View>

        <View className="input-group">
          <Text className="label">确认新密码</Text>
          <View className="input-wrapper">
            <Input
              className="input"
              type={showConfirmPassword ? 'text' : 'password'}
              placeholder="请再次输入新密码"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.detail.value)}
            />
            <MaterialIcons
              name={showConfirmPassword ? 'visibility' : 'visibility-off'}
              size={20}
              color="#ccc"
              onClick={() => setShowConfirmPassword(!showConfirmPassword)}
            />
          </View>
        </View>

        <View className="btn-container">
          <Button className="change-btn" onClick={handleChangePassword}>
            <Text className="btn-text">确认修改</Text>
          </Button>
        </View>
      </View>
    </View>
  );
};

export default ChangePasswordPage;